<title>角色管理</title>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>系统管理</cite></a>
        <a><cite>角色管理</cite></a>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="LAY-system-role-manage" lay-filter="LAY-system-role-manage"></table>
            <script type="text/html" id="LAY-system-role-toolbar">
                <div class="layui-btn-container">
                    {{# if (AppGeneral.userCan('system.role.destroy')){ }}
                    <btton class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deletes"><i class="layui-icon layui-icon-delete"></i></btton>
                    {{# } }}
                    {{# if (AppGeneral.userCan('system.role.create')){ }}
                    <btton class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></btton>
                    {{# } }}
                </div>
            </script>
        </div>
    </div>
</div>

<script>
    layui.use(['index', 'baseMethods'], function () {
        const {table, layer, baseMethods} = layui, tableId = 'LAY-system-role-manage';
        const tableIns = baseMethods.table({
            elem: '#'+tableId,
            url: '/system/role/list',
            page: false,
            toolbar: '#LAY-system-role-toolbar',
            cols: [[
                {checkbox: true,fixed: true},
                {field: 'name', title: '名称'},
                {field: 'display_name', title: '显示名称'},
                {field: 'created_at', title: '添加时间', width: 180},
                {field: 'updated_at', title: '修改时间', width: 180},
                {fixed: 'right', width: 220, align:'center',
                    templet: function (d) {
                        let html = '<div class="layui-btn-group">\n';
                        if (AppGeneral.userCan('system.role.edit')){
                            html += '<btton class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></btton>';
                        }
                        if (AppGeneral.userCan('system.role.permission')){
                            html += '<btton class="layui-btn layui-btn-sm layui-btn-normal" lay-event="permission"><i class="layui-icon layui-icon-set-fill"></i></btton>';
                        }
                        return html+ '</div>\n';
                    }
                }
            ]]
        });
        let tableTools = {
            add: function (){
                baseMethods.adminLayer([
                    {title: '添加', area: ['600px', '350px'], id: 'LAY-popup-system-role-form'},
                    {tpl: 'system/role/form', id: 'LAY-system-role-form'},
                    {url: '/system/role/store', type: "post",
                        success: function (){
                            tableIns.reloadData();
                        }
                    },
                ]);
            },
            deletes: function (obj){
                const hasCheck = table.checkStatus(obj.config.id), hasCheckData = hasCheck.data;
                if (hasCheckData.length > 0){
                    baseMethods.toolOpera({
                        title: `确认删除选中的 ${hasCheckData.length} 项吗？`,
                        request: {
                            url: '/system/role/destroy',
                            type: "delete",
                            data: {ids: hasCheckData.map(item => item.id)},
                            success: function (){
                                tableIns.reloadData();
                            }
                        },
                    })
                    return true;
                }
                layer.msg('请选择操作项', {icon: 5});
            },
            edit: function (obj){
                let data = obj.data;
                baseMethods.adminLayer([
                    {title: '编辑', area: ['600px', '350px'], id: 'LAY-popup-system-role-form'},
                    {tpl: 'system/role/form', mode: 'edit', data, id: 'LAY-system-role-form'},
                    {url: '/system/role/'+data.id+'/update', type: "put",
                        success: function (field){
                            obj.update(field);
                        }
                    },
                ]);
            },
            permission: function (obj){
                let data = obj.data;
                baseMethods.adminLayer([
                    {title: '设置权限', area: ['450px', '620px'], id: 'LAY-popup-system-role-permission'},
                    {tpl: 'system/role/permission', data, id: 'LAY-system-role-permission'},
                    {url: '/system/role/'+data.id+'/permission', type: "put"}
                ]);
            },
        };
        table.on('toolbar('+tableId+')', function(obj){
            tableTools[obj.event] ? tableTools[obj.event].call(this, obj) : '';
        });
        table.on('tool('+tableId+')', function (obj){
            tableTools[obj.event] ? tableTools[obj.event].call(this, obj) : '';
        });
    });
</script>
